.wrapper {
  display   : block;
  position  : relative;
  width     : 100%;
  height    : 100%;
  min-height: 500px;
  overflow  : hidden;
  background: #000;
  text-align: center;

  &::before {
    content       : '';
    display       : inline-block;
    height        : 100%;
    vertical-align: middle;
  }

  h2 {
    z-index: 111;
  }

  .container {
    top               : 50%;
    display           : inline-block;
    vertical-align    : middle;
    perspective       : 2px;
    perspective-origin: 50% 50%;
    top               : 250px;
    position          : relative;
    animation         : hueRotate 21s infinite linear;

    .group {
      position           : absolute;
      width              : 1000px;
      height             : 1000px;
      left               : -500px;
      top                : -500px;
      transform-style    : preserve-3d;
      animation          : move 12s infinite linear;
      animation-fill-mode: forwards;

      .item {
        position       : absolute;
        width          : 100%;
        height         : 100%;
        background     : url(./fLwuMd.jpg);
        background-size: cover;
        opacity        : 1;
        animation      : fade 12s infinite linear;
        animation-delay: 0;
      }

      .item_right {
        transform: rotateY(90deg) translateZ(500px);
      }

      .item_left {
        transform: rotateY(-90deg) translateZ(500px);
      }

      .item_top {
        transform: rotateX(90deg) translateZ(500px);
      }

      .item_bottom {
        transform: rotateX(-90deg) translateZ(500px);
      }

      .item_middle {
        transform: rotateX(180deg) translateZ(1000px);
      }

      &:nth-child(2) {
        animation      : move 12s infinite linear;
        animation-delay: -6s;

        .item {
          animation-delay: -6s;
        }
      }
    }
  }





}



@keyframes move {
  0% {
    transform: translateZ(-500px) rotate(0deg);
  }

  100% {
    transform: translateZ(500px) rotate(0deg);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  25%,
  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}